<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单例模式Toast提示框</title>
  <style>
    div.toast {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 600px;
      height: 340px;
      background-color: #fff;
      display: none;
    }

    .top {
      height: 40px;
      background-color: skyblue;
      padding: 10px;
    }

    .top>span {
      float: right;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      cursor: pointer;
      background-color: #fff;
      text-align: center;
      font-size: 16px;
      line-height: 20px;
    }

    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 210px;
      padding: 10px;
    }

    .btns {
      height: 40px;
      background-color: tomato;
      padding: 5px 30px;
    }

    .btns>button {
      padding: 10px 40px;
      margin-right: 30px;
      float: right;
    }
  </style>
</head>

<body>
  <div class="toast">
    <div class="top">标题 <span>X</span></div>
    <div class="content">提示内容</div>
    <div class="btns">
      <button>取消</button>
      <button>确定</button>
    </div>
  </div>
</body>

</html>

<script>

  // 为了功能的单例模式
  const Toast = (function () {
    // 实现功能的类
    class Toast {
      constructor() {
        // 最外层的div标签
        this.ele = document.createElement('div')
        this.ele.className = 'toast'
        document.body.appendChild(this.ele)

        // 添加回调函数属性
        this.callback = function () { }

        this.bindEvent()
      }

      // 填充this.ele内容
      setContent(text) {
        this.ele.innerHTML = `
        <div class="top">标题 <span class="close">X</span></div>
        <div class="content">${text}</div>
        <div class="btns">
          <button class="cancel">取消</button>
          <button class="ok">确定</button>
        </div>   
      `

        this.ele.style.display = 'block'
      }

      // 添加事件
      bindEvent() {
        this.ele.addEventListener('click', e => {
          e = e || window.event
          const target = e.target || e.srcElement

          if (target.className === 'close') {
            this.ele.style.display = 'none'
          }

          if (target.className === 'cancel') {
            this.callback(false)
            this.ele.style.display = 'none'

          }

          if (target.className === 'ok') {
            this.callback(true)
            this.ele.style.display = 'none'

          }
        })
      }


    }

    // 单例模式核心代码
    let instance = null

    return function singleTon(text, cb) {
      if (!instance) {
        instance = new Toast()
      }

      // 每次一次实例化都要执行setContent
      instance.setContent(text)
      instance.callback = cb || function () { }
      return instance
    }
  })()

  new Toast('Hello World~~', res => console.log(res))
</script>